<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>转让详情</title>
    <mystyle>
        <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">
    </mystyle>
</head>
<body data-spy="scroll" data-target="#scrollpry" style="position: relative;">
<div id="branchimg">
    <div class="w1217 center clearfix">
        <img id="bigimg" width="681" height="439" class="pull-left block"
             src="/public/image/${myHouseDTO.houseInfoDTO.imageGuids[0]}">

        <div class="pull-left w535" id="simg">
            <c:forEach items="${myHouseDTO.houseInfoDTO.imageGuids}" var="imagesGuid" varStatus="status">
                <c:if test="${status.index<4}">
                    <c:if test="${status.index <2}">
                        <div class="pull-left ml5"><img class="block" src="/public/image/${imagesGuid}"></div>
                    </c:if>
                    <c:if test="${status.index>=2}">
                        <div class="pull-left ml5 mt5"><img class="block" src="/public/image/${imagesGuid}"></div>
                    </c:if>
                </c:if>
            </c:forEach>
        </div>
    </div>
</div>
<div id="demain">
    <div id="dsput">
        <div id="staticposition"></div>
        <div id="line2" class="msfont">

            <ul class="w1217 center clearfix">
                <li><a href="#dec1">度假屋详情</a></li>
                <li><a href="#dec2">基本信息</a></li>
                <li><a href="#dec3">配套设施</a></li>
                <li><a href="#dec5">地理位置</a></li>
            </ul>

        </div>
    </div>
</div>
<div id="decontent" class="msfont">

    <div id="dec1">
        <div class="w1217 center clearfix">
            <div class="key">
                <div class="htt">${myHouseDTO.houseInfoDTO.name}</div>
                <div class="keyword">${myHouseDTO.houseInfoDTO.houseAddress}</div>
                <div class="keyico mt10">
                    <ul class="clearfix">
                        <li>
                            <div class="icon1"></div>
                            <p>${myHouseDTO.ownername}</p></li>
                        <li>
                            <div class="icon1"></div>
                            <p>${myHouseDTO.houseInfoDTO.houseType}</p></li>
                    </ul>
                </div>
            </div>
            <div class="decription">${myHouseDTO.houseInfoDTO.houseFeature}<i class="fa fa-plus"></i>
            </div>
        </div>
    </div>

    <div id="dec2" class="f5bg">
        <div class="w1217 center clearfix">
            <div class="pull-left"><img class="block" src="/static/static/images/f1.jpg"></div>
            <div class="pull-left">
                <table class="dtable">
                    <tr>
                        <td>床型: 实体床</td>
                        <td>房间类型：${myHouseDTO.houseInfoDTO.houseType}</td>
                        <td>卫生间： 1</td>
                        <td>房源类型： 住宿加早餐</td>
                        <td>床位： 1</td>
                    </tr>
                    <tr>
                        <td>入住时间： 14:00</td>
                        <td>退房时间： 12:00</td>
                        <td>是否豢养宠物： 狗和猫</td>
                        <td>卧室： 1</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="dec3" class="f5bg">
        <div class="w1217 center clearfix">
            <div class="pull-left"><img class="block" src="/static/static/images/f2.jpg"></div>
            <div class="pull-left">
                <table class="dtable">
                    <tr>
                        <c:forEach items="${myHouseDTO.houseInfoDTO.supportingDTOs}" var="supporting">
                            <td>${supporting.name}</td>
                        </c:forEach>
                    </tr>
                    <tr>
                        <c:forEach items="${myHouseDTO.houseInfoDTO.equipmentDTOs}" var="equipment">
                            <td>${equipment.name}</td>
                        </c:forEach>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <%--<div id="dec5" class="f5bg">--%>
    <%--<div class="w1217 center clearfix">--%>
    <%--<div class="pull-left"><img class="block" src="/static/static/images/f4.jpg"></div>--%>
    <%--<div class="pull-left">--%>
    <%--<img class="block  mt50 pb50" src="/static/static/images/dt.jpg">--%>
    <%--</div>--%>
    <%--</div>--%>
    <%--</div>--%>
</div>
<div class="ipadDemain table-responsive">
    <table class="table table-bordered">
        <tr>
            <th colspan="5">${myHouseDTO.houseInfoDTO.name}</th>
        </tr>
        <tr>
            <td colspan="5">${myHouseDTO.houseInfoDTO.houseFeature}</td>
        </tr>
        <tr>
            <th colspan="5">房屋基本信息</th>
        </tr>
        <tr>
            <td>床型: 实体床</td>
            <td>房间类型：${myHouseDTO.houseInfoDTO.houseType}</td>
            <td>卫生间：</td>
            <td>房源类型： 住宿加早餐</td>
            <td>床位：</td>
        </tr>
        <tr>
            <td>入住时间： 14:00</td>
            <td>退房时间： 12:00</td>
            <td>是否豢养宠物： 狗和猫</td>
            <td colspan="2">卧室：</td>
        </tr>
        <tr>
            <th colspan="5">便利设施</th>
        </tr>
        <tr>
            <td colspan="5">
                <c:forEach items="${myHouseDTO.houseInfoDTO.supportingDTOs}" var="equipment">
                    <span>${equipment.name}</span>
                </c:forEach>
                <c:forEach items="${myHouseDTO.houseInfoDTO.equipmentDTOs}" var="supporting">
                    <span>${supporting.name}</span>
                </c:forEach>
            </td>
        </tr>
    </table>
</div>
<myscript>
    <script type="text/javascript">
        jQuery("#sildePic").slide({ mainCell: ".picbody", effect: "leftLoop", vis: 3, scroll: 1});
        $("#simg img").click(function (event) {
            var s = $(this).attr('data-img');
            $("#bigimg").attr('src', s);
        });
        $(".decimg").hover(function () {
            var srcs = $(this).attr('src');
            var dsrc = $(this).attr('data-img');
            $(this).attr('src', dsrc);
            $(this).attr('data-img', srcs);

        }, function () {
            var srcs = $(this).attr('src');
            var dsrc = $(this).attr('data-img');
            $(this).attr('src', dsrc);
            $(this).attr('data-img', srcs);
        });
        //锚点链接缓动
        $('#scrollpry li a').bind('click', function (event) {
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top - $("#scrollpry").height()
            }, 1000);
            event.preventDefault();
        });


        $(function () {
            getUserInfo();
            $('.cnInUl ul li').click(function (e) {
                $(this).addClass('current').siblings().removeClass('current');
            });
            /*nameDetail*/
            $('.nameDetail').css('display', 'none');
            $('.personName').hover(function (e) {
                $('.nameDetail').css('display', 'block');
            }, function () {
                $('.nameDetail').css('display', 'none');
            });

        })


        function getUserInfo() {
//            location.href="/public/userinfo";
            $.ajax({
                url: "/front/user_info/userinfo",
                success: function (data) {
                    var userName = data.username;
                    $("#userName").html(userName);
                    var imageGuid = data.imageGuid;
                    if (imageGuid != null) {
                        $("#noLogin").hide();
                        var url = "/public/image/" + imageGuid;
                        $("#userName_1").html("Hi," + data.username);
                        $("#userName_2").html(data.username);
                        $("#useImage").attr("src", url);
                    }
                }
            });
        }

        function userDetails() {
            location.href = "/front/user_info/form";
        }

    </script>
</myscript>
</body>
</html>